<template>
  <div class="admin-layout">
    <!-- 顶部导航栏 -->
    <div class="admin-header">
      <div class="header-left">
        <div class="logo" @click="goToDashboard">
          <!-- 预留Logo图片位置 -->
          <div class="logo-placeholder"></div>
        </div>
        <div class="search-bar">
          <el-input
            v-model="searchKey"
            placeholder="搜索..."
            :prefix-icon="Search"
          />
        </div>
      </div>
      <div class="header-right">
        <span class="welcome-text">欢迎回来，{{ adminName }}</span>
        <el-button type="danger" plain size="small" @click="handleLogout">
          退出登录
        </el-button>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="admin-content">
      <!-- 左侧菜单 -->
      <div class="admin-sidebar">
        <el-menu
          :default-active="activeMenu"
          class="admin-menu"
          router
          unique-opened
        >
          <!-- 仪表盘 -->
          <el-menu-item index="/admin/dashboard">
            <el-icon><DataLine /></el-icon>
            <span>数据仪表盘</span>
          </el-menu-item>

          <!-- 用户管理 -->
          <el-sub-menu index="/admin/users">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/admin/users">用户列表</el-menu-item>
            <el-menu-item index="/admin/user/add">添加用户</el-menu-item>
          </el-sub-menu>

          <!-- 内容管理 -->
          <el-sub-menu index="/admin/content">
            <template #title>
              <el-icon><Document /></el-icon>
              <span>内容管理</span>
            </template>
            <el-menu-item index="/admin/content">内容列表</el-menu-item>
            <el-menu-item index="/admin/content/add">添加内容</el-menu-item>
            <el-menu-item index="/admin/content-categories">内容分类</el-menu-item>
          </el-sub-menu>

          <!-- 商品管理 -->
          <el-sub-menu index="/admin/shop">
            <template #title>
              <el-icon><ShoppingBag /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/admin/shop">商品列表</el-menu-item>
            <el-menu-item index="/admin/shop/add">添加商品</el-menu-item>
            <el-menu-item index="/admin/orders">订单管理</el-menu-item>
          </el-sub-menu>

          <!-- 数据分析 -->
          <el-sub-menu index="/admin/analytics">
            <template #title>
              <el-icon><Histogram /></el-icon>
              <span>数据分析</span>
            </template>
            <el-menu-item index="/admin/analytics">总体数据</el-menu-item>
            <el-menu-item index="/admin/user-analytics">用户数据</el-menu-item>
            <el-menu-item index="/admin/content-analytics">内容数据</el-menu-item>
            <el-menu-item index="/admin/shop-analytics">商城数据</el-menu-item>
          </el-sub-menu>

          <!-- 系统设置 -->
          <el-menu-item index="/admin/settings">
            <el-icon><Setting /></el-icon>
            <span>系统设置</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧内容区 -->
      <div class="admin-main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  DataLine,
  User,
  Document,
  ShoppingBag,
  Setting,
  Search,
  Histogram
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const searchKey = ref('')
const adminName = ref('管理员')

// 计算当前活动菜单
const activeMenu = computed(() => {
  // 返回基本路径
  const path = route.path
  // 如果是子路由，返回父路径
  if (path.includes('/user/') || path.includes('/content/') || path.includes('/shop/')) {
    return '/' + path.split('/').slice(0, 3).join('/')
  }
  return path
})

const goToDashboard = () => {
  router.push('/admin/dashboard')
}

const handleLogout = () => {
  // 清除登录状态
  localStorage.removeItem('admin_token')
  ElMessage.success('退出成功')
  router.push('/')
}
</script>

<style scoped>
.admin-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.admin-header {
  height: 60px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo {
  width: 120px;
  height: 40px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.logo:hover {
  opacity: 0.8;
}

.logo-placeholder {
  width: 100%;
  height: 100%;
  background-color: #e0e0e0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.search-bar {
  width: 300px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.welcome-text {
  color: #666;
}

.admin-content {
  display: flex;
  margin-top: 60px;
  flex: 1;
}

.admin-sidebar {
  width: 240px;
  background-color: white;
  border-right: 1px solid #eee;
  position: fixed;
  top: 60px;
  bottom: 0;
  overflow-y: auto;
}

.admin-menu {
  border-right: none;
}

.admin-main {
  flex: 1;
  margin-left: 240px;
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-bar {
    display: none;
  }
  
  .admin-sidebar {
    width: 64px;
  }
  
  .admin-main {
    margin-left: 64px;
  }
}
</style> 